<template>
    <div v-if="isVisible" class="video-modal-overlay" @click="closeModal" @touchstart.prevent="handleTouchStart"
        @touchend.prevent="handleTouchEnd">
        <div class="video-modal-content" @click.stop>
            <button class="close-button" @click="closeModal">
                <img class="close-svg" src="../../../assets/images/consultation/student/close.svg" alt="" srcset="">
            </button>
            <div class="video-wrapper">
                <video ref="videoPlayer" :src="videoUrl" controls autoplay></video>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            touchStartX: 0,
            touchEndX: 0,
        };
    },
    props: {
        isVisible: {
            type: Boolean,
            required: true
        },
        videoUrl: {
            type: String,
            required: true
        }
    },
    methods: {
        closeModal() {
            this.$emit('update:isVisible', false);
        },
        handleTouchStart(e) {
            this.touchStartX = e.touches[0].clientX;
        },
        handleTouchEnd(e) {
            this.touchEndX = e.changedTouches[0].clientX;
            // 判断是否为滑动操作，以及滑动方向
            if (this.touchEndX < this.touchStartX) {
                // 向左滑动，可以执行关闭弹窗等操作
                this.closeModal();
            }
        },
        reloadVideo() {
            if (this.$refs.videoPlayer) {
                this.$refs.videoPlayer.load(); // Reload the video
            }
        }
    },
    watch: {
        isVisible(newVal) {
            if (newVal && this.$refs.videoPlayer) {
                this.$refs.videoPlayer.load(); // Reload the video to start from the beginning
            }
        },
        videoUrl() {
            setTimeout(() => {
                this.reloadVideo(); 
            }, 20);
        }
    }
};
</script>
  
<style scoped>
.video-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999999;
}
.video-modal-content {
  position: relative;
  background: #fff;
  width: 90vw;
  max-width: 1000px; /* 视窗宽度的 90% */
  max-height: 600px; /* 视窗高度的 90% */
}
.video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持视频比例，并填充容器 */
}
.close-button {
    position: absolute;
    top: -50px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    z-index: 98;
    .close-svg {
        width: 40px;
        height: 40px;
    }
}
/* 添加移动端适配样式 */
@media (max-width: 768px) {
  .video-modal-content {
    max-width: 100%; /* 在小屏幕上占满全屏 */
  }
  .close-button {
    position: absolute;
    top: -30px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    z-index: 98;
    .close-svg {
        width: 20px;
        height: 20px;
    }
}
}
</style>